<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link rel="stylesheet" type="text/css" href="./css/bootstrap.css"/>
  <link rel="stylesheet" href="./css/mo1_yejian.css">
		<script src="./js/jquery.min.js"></script>
		<script src="./js/popper.min.js"></script>
		<script src="./js/bootstrap.min.js"></script>
  <title>夜间超市</title>

    
  </style>
</head>
<body>
  <!-- 
    1.头像、id、地址
      1.1会自动从个人中心里更新进来，头像照片会动
      1.2地址是个多次选择的，先选宿舍楼，再选房间
    2.宿舍按钮
      2.1点击宿舍按钮后会出现宿舍大块；
      2.2点击某个宿舍小块，宿舍名进入宿舍框里，同时宿舍大块消失，超市大块出现；
      2.3可在宿舍框里填文字，宿舍大块中自动筛选出相关文字的宿舍，只能点击下方宿舍小块，才会让宿舍名进入宿舍框里；如果点其他地方，输入的文字会消失；
      2.4宿舍竖着排列，3列，往下溢出出现拖拽条
    3.超市按钮
      3.1超市大块出现后，点击某个超市大块，超市名进入超市小块，同时超市大块消失；
      3.2选完宿舍后，也可输入超市名字，超市大块中自动筛选出相关文字的超市，如果输入hrd,只要超市里含有h,r,d就可以筛选出来；点击超市小块，才会让超市名进入超市框；点击其他位置，输入的超市文字会消失；
      3.3超市竖着排列，2列，往下溢出出现拖拽条
      3.4如果修改了宿舍框里的内容，超市框里的内容消失
    4.商品
      4.1当超市框中有超市时，出现商品大块
      4.2第一排左边有4个选择[饮料，零食，生活用品，随便看看]，点击就是选中了，再点就是取消筛选
      4.3右方是搜索框，输入文字，匹配出相关的商品，有清空按钮
      4.4两列排列的商品，可点加入购物车，
    5.购物车
      5.1点击，购物车模块出现在页面上，背景是半透明的灰色，然后从下往上放一个80%的框
      5.2第一行是全选、购物车，关闭按钮
      5.2中间是一个个的商品，往下溢出拖拽条
      5.3下方是总金额：多少，和去支付
      5.4点了去吃福就跳到支付页面，如果推出，进入待付款，
    6.订单详情
      6.1跳转页面[已完成，已付款，待付款，所有订单]
    7.我的收藏
      7.1
   -->

  <div>
    <div class="vvh8"></div>
    <!-- 社区超市 -->
    <div class="container ye1">
      <div class="mt-2 d-flex justify-content-between">
        <div class="ye11">社区超市</div>
        <div class="ye12 d-flex justify-content-around ">
          <div class="ye13"><img src="./img/mo1_yejian/you01.png" alt=""></div>
          <span>|</span>
          <div class="ye13"><img src="./img/mo1_yejian/you02.png" alt=""></div>
        </div>
      </div>
    </div>

    <!-- 1 -->
    <div class="container ye2">
      <div class="ye21 row">
        <div class="col-2">
          <div class="ye211">
            <img src="./img/mo1_yejian/tou01.png" alt="">
          </div>
        </div>
        <div class="col-4">id</div>
        <div class="col-6" data-target="#ye3" data-toggle="collapse">
          选择宿舍点击此处
          <input type="text" name="" id="">
          <input type="text" name="" id="">
        </div>
      </div>

    </div>

    <!-- 2宿舍大块 -->
    <div class="container ye3 text-center collapse" id="ye3"  data-target="#ye4" data-toggle="collapse">
      <div class="row">
        <div class="col-4 ye32">
          <div>北一宿舍</div>
        </div>
        <div class="col-4 ye32">北一宿舍</div>
        <div class="col-4 ye32">北一宿舍</div>
        <div class="col-4 ye32">北一宿舍</div>
        <div class="col-4 ye32">南一宿舍</div>
        <div class="col-4 ye32">南一宿舍</div>
        <div class="col-4 ye32">南一宿舍</div>
        <div class="col-4 ye32">南一宿舍</div>
        <div class="col-4 ye32">南一宿舍</div>

      </div>
		</div>

    <!-- 3超市大块 -->
    <div class="container ye4 text-center collapse" id="ye4">
      <div class="row">
        <div class="col-6">
          <div class="ye41">小芳家</div>
        </div>
        <div class="col-6">
          <div class="ye41">小芳家</div>
        </div>
        <div class="col-6">
          <div class="ye41">小芳家</div>
        </div>
        <div class="col-6">
          <div class="ye41">小芳家</div>
        </div>
        <div class="col-6">
          <div class="ye41">小芳家</div>
        </div>
        <div class="col-6">
          <div class="ye41">小芳家</div>
        </div>
        <div class="col-6">
          <div class="ye41">小芳家</div>
        </div>

      </div>
		</div>

    <!-- 4商品 -->
    <div class="container ye5">
      <div class="ye50">
        <div class="row">
          <div class="col-6">
            <div class="ye51">商品1</div>
          </div>
          <div class="col-6">
            <div class="ye51">商品1</div>
          </div>
          <div class="col-6">
            <div class="ye51">商品1</div>
          </div>
          <div class="col-6">
            <div class="ye51">商品1</div>
          </div>
          <div class="col-6">
            <div class="ye51">商品1</div>
          </div>
          <div class="col-6">
            <div class="ye51">商品1</div>
          </div>
          <div class="col-6">
            <div class="ye51">商品1</div>
          </div>
  
        </div>
      </div>

    </div>

    <!-- 六楼 购物车 -->

    <!-- 八楼 -->
    <div class="container">
      <div class="w-100 dibu row pt-1 m-0">
        <div class="di1 col-4">
          <div>
            <img src="./img/mo1_yejian/xia01.png" alt="">
            <span>购物车</span>
          </div>
        </div>
        <div class="di1 col-4">
          <div>
            <img src="./img/mo1_yejian/xia02.png" alt="">
            <span>历史订单</span>
          </div>
        </div>
        <div class="di1 col-4">
          <div>
            <img src="./img/mo1_yejian/xia03.png" alt="">
            <span>我的收藏</span>
          </div>
        </div>

      </div>
    </div>
    
  </div>
</body>
</html>